<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实时数据</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/sm.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/echarts-all.js"></script>
    <style>
    	.title_top{text-align: center;}
			.rq{padding: 0;}
			.rq a{color: #FFF;}
    	.page, .page-group {
    		background: #FFFFFF;}
    		.sj-list{ position:relative; display:block; overflow:hidden; width:100%; height:auto; margin-top: 50px;}
    		.sj-list .sj-item{ position:relative; width:50%; height:160px; float:left; text-align: center;}
    		.jl-btn{position: relative; width: 200px; height: 48px; line-height: 48px; color: #ffffff;  background: #007AFF; border-radius: 30px; text-align:center; margin: 20px auto 0;}
    </style>
  </head>
  <body>
    <div class="page-group">
        <div class="page page-current">
            <div class="col-xs-12 title_top">
								<div class="col-xs-3 rq back">
									<a href="javascript:history.back(-1)">
										<div style="float: left;"><img src="images/icon_left.png"/></div>
										<div style="float: left;margin-top: 2px;">返回</div>
									</a>
								</div>
								<div class="col-xs-6">实时数据</div>
								<div class="col-xs-3"></div>
						</div>
            <div class="sj-list">
                <div class="sj-item" id="PM10"></div>
                <div class="sj-item" id="PM2.5"></div>
                <div class="sj-item" id="wendu"></div>
                <div class="sj-item" id="shidu"></div>
                <div class="sj-item" id="fengsu"></div>
                <div class="sj-item" id="zaosheng"></div>
            </div>
            <div class="jl-btn history" data-id="0" >历史记录</div>
        </div>
    </div>
    <script type='text/javascript' src='js/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/sm.min.js' charset='utf-8'></script>
</body>
</html>
<script src="js/mui.min.js"></script>
<script src="js/project.config.js"></script>
<script>
	mui("body").on("tap",".history",function(){
			var id = $(this).data('id');
			redirect('en_history.html',{environmentID:id});
	});
	mui(".title_top").on("tap",".back",function(){
				mui.back();
	});
	function echart(id,value,name,company,max=100){
		var myChart = '';
		var myChart = echarts.init(document.getElementById(id));
					    var option = {
					        tooltip : {
					            formatter: "{a} <br/>{b} : {c}%"
					        },
					        toolbox: {
					            show : true,
					            feature : {
					                mark : {show: true},
					                restore : {show: true},
					                saveAsImage : {show: true}
					            }
					        },
					        series : [
					            {
					                name:name,
					                type:'gauge',				
													min:0,
													max:max,            
					                splitNumber: 2,       // 分割段数，默认为5
					                axisLine: {            // 坐标轴线
					                    lineStyle: {       // 属性lineStyle控制线条样式
					                        color: [[0.2, '#00cadc'],[0.65, '#ffa500'],[1, '#ff4500']], 
					                        width: 8
					                    }
					                },
					                axisTick: {            // 坐标轴小标记
					                    splitNumber: 0,   // 每份split细分多少段
					                    length :0,        // 属性length控制线长
					                    lineStyle: {       // 属性lineStyle控制线条样式
					                        color: 'auto'
					                    }
					                },
					                axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
					                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					                        color: 'auto'
					                    }
					                },
					                splitLine: {           // 分隔线
					                    show: true,        // 默认显示，属性show控制显示与否
					                    length :18,         // 属性length控制线长
					                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
					                        color: 'auto'
					                    }
					                },
					                pointer : {
					                    width : 5
					                },
					                title : {
					                    show : true,
					                    offsetCenter: [0, '98%'],       // x, y，单位px
					                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					                        fontWeight: '100',
											fontSize:'14'
					                    }
					                },
					                detail : {
					                    formatter:'{value}'+company,
					                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
					                        color: 'auto',
					                        fontWeight: '100',
											fontSize:'12'
					                    }
					                },
					                data:[{value: value, name: name}]
					            }
					        ]
					    };
					    // 为echarts对象加载数据 
					    myChart.setOption(option);
					    setInterval(function (){
					        option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
					        myChart.setOption(option,true);
				},2000);
	}
</script>
<script type="text/javascript">
		mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'environment-get-device-info';
			data.token = token;
			data.projectID = params.projectID;
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							$(".history").data('id',ref.data.environments[0]['environmentID']);
							echart('PM10',ref.data.environments[0]['pm10'],'PM10','μg/m3',250);
						}
						return false;
					}
			});
		});
</script>

<script type="text/javascript">
	mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'environment-get-device-info';
			data.token = token;
			data.projectID = params.projectID;
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							echart('PM2.5',ref.data.environments[0]['pm2p5'],'PM2.5','μg/m3',125);
						}
						return false;
					}
			});
	});
</script>
<script type="text/javascript">
	mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'environment-get-device-info';
			data.token = token;
			data.projectID = params.projectID;
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							echart('wendu',ref.data.environments[0]['temperature'],'温度','°C');
						}
						return false;
					}
			});
	});
</script>
<script type="text/javascript">
	mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'environment-get-device-info';
			data.token = token;
			data.projectID = params.projectID;
			data.projectID = 5140;
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							echart('shidu',ref.data.environments[0]['humidity'],'湿度','%');
						}
						return false;
					}
			});
	});
</script>
<script type="text/javascript">
	mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'environment-get-device-info';
			data.token = token;
			data.projectID = params.projectID;
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							echart('fengsu',ref.data.environments[0]['windSpeed'],'风速','m/s');
						}
						return false;
					}
			});
	});
</script>
<script type="text/javascript">
	mui.plusReady(function(){
			var token = get_token();
			var params = get_ws();
			var data = {};
			data.api = 'environment-get-device-info';
			data.token = token;
			data.projectID = params.projectID;
			mui.ajax(project_cofnig.service_url,{
					async:true,
					dataType:'json',
					data:data,
					success:function(ref){
						if(ref.code == 0){
							echart('zaosheng',ref.data.environments[0]['noise'],'噪声','dB');
						}
						return false;
					}
			});
	});
</script>
